How about we change this padding as 0

style={{ padding: '0px', ...props.titleContainerStyles }}

And set the padding of EuiPanel as 20px, so we can align title and content body.

<EuiPanel
    style={{ padding: '20px', ...props.panelStyles }}
    className={props.contentPanelClassName}
  >

Changing the padding of EuiPanel to 20px will make the EuiHorizontalRule looks disconnected to the Panel. I changed the style for Live chart, and below is the screenshot.

This is not same as the UX mock up.

Sure, let's follow the UX mock up

Why increase left and right padding? Shouldn't we increase the top and down padding?

As mentioned above, since we cannot increase EuiPanel padding, we have to increase the left/right padding of body to 20px.

Regarding the top/down padding, you are right, we should make them both 20px. I didn't increase them because:

1. Top padding: I set top padding in AnomaliesLiveChart and AnomaliesDistributionChart: FlexGroup has default padding -12px, and EuiHorizontalRule has default top/bottom margin 8px, changing top padding of FlexGroup to 0px can make the distance between EuiHorizontalRule and FlexItems in FlexGroup to 20px

2. Bottom padding: EuiPanel has default padding 16px, thus I keep it for the bottom padding.

To consolidate style changes for ContentPanel, I think I can make following changes so that all the style change can be configured in ContentPanel, and the distance between components and Panel edge or EuiHorizontalRule is 20px.

  <EuiPanel
    style={{
      paddingLeft: '0px',
      paddingRight: '0px',
      paddingTop: '20px',
      paddingBottom: '20px',
      ...props.panelStyles,
    }}
    className={props.contentPanelClassName}
  >

    <EuiFlexGroup
      style={{ padding: '0px 20px', ...props.titleContainerStyles }}
      justifyContent="spaceBetween"
      alignItems="center"
    >

    <div
      style={{
        paddingTop: '12px', // 12px here is because EuiHorizontalRule has bottom margin 8px
        paddingLeft: '20px',
        paddingRight: '20px',
        ...props.bodyStyles,
      }}
    >
      {props.children}
    </div>

Please let me know your thoughts on this.

I'm ok about it, we can tune if any other comments come in.

just curious: only blank string can hide legend ? Should we set a normal id rather than whitespace when the liveAnomalyData not empty?

This is very tricky.

If detectorName value for placeholder data is set as null, the id of BarSeries will be shown as legend for placeholder data.

Given empty liveAnomalyData, the legend of placeholder data will be hidden by changing showLegend to false, aka showLegend={!isEmpty(liveAnomalyData)}. Thus we don't need to worry about legend of placeholder data in case of empty liveAnomalyData.

Given non-empty liveAnomalyData, the legend of placeholder data is shown along with legend of liveAnomalyData. Legend of placeholder data is not needed now. Changing id of BarSeries to blank string can make legend of placeholder data disappear, and normal legend of liveAnomalyData is still there.

But we cannot always pass blank string {''}to id, as in the case of null detectorName + id as {''} , EuiChart will show No data to dsiplay, which UX wants to avoid. That's why I pass {' '} /{''} to id

After second thought, I changed to

[AD_DOC_FIELDS.DETECTOR_NAME]: !isEmpty(liveAnomalyData) ? '' : null,

and keep using

<BarSeries
id={'Detector Anomaly grade'}`

It can also work. will change to that implementation and post another commit.

Should we use ASC sort direction? name is just string, is it better to show alphabetically?

This is just used to check if there is any detector ever created. That is why size is 1. If no detector, we move to EmptyDashboard page. If yes, we navigate to the real Dashboard page. using ASC or DESC doesn't matter too much here.

any smarter way of doing the check of existing detector is appreciated.

Sure, got it, that's ok. Maybe we can use _count in future.
https://stackoverflow.com/questions/25739888/counting-number-of-documents-using-elasticsearch

Probably _count is a bit faster since it doesn't have to execute a full query with ranking and result fetching and can simply return the size.